﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0050)http://benlenarts.github.com/Fx.Implicit/demo.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Fx.Implicit Demo</title>
<style>
  body { font-family: Helvetica, Arial, sans-serif; }
  .demo pre code {
    float: left;
    margin-right: 10px;
    border: 1px solid gray;
    padding: 10px;
    width: 280px;
    height: 180px;
    font-family: Monaco, monospace;
    font-size: 12px;
  }
  .demo .stage {
    border: 1px solid gray;
    overflow: hidden;
    height: 200px; 
    width: 300px;
    font-size: 25px;
  }
  /* basic */
  .demo .stage .boo {
    color: black;
    background: black;
    position: relative;
    left: 75px;
    top: 70px;
    padding: 20px;
    width: 100px;
    text-align: center;
  }
  .demo .stage .boo.toggled {
    color: red;
    background: red;
  }
  /* multiple */
  .demo .stage .wobbler {
    position: relative;
    left: 75px;
    top: 40px;
    width: 100px;
    padding: 30px 0;
    border: 5px solid black;
    text-align: center;
  }
  .demo .stage .wobbler.toggled {
    padding: 10px 20px;
    left: 55px;
    top: 60px;
  }
  /* hierarchy */
  .demo .stage .cage {
    position: relative;
    left: 10px;
    top: 10px;
    width: 278px;
    height: 178px;
    border: 1px solid #600;
    color: gray;
  }
  .demo .stage .cage.toggled {
    border-color: red;
  }
  .demo .stage .critter {
    position: absolute;
    padding: 5px;
    background: #600;
    color: white;
  }
  #critter-1 { left: 50px; top: 20px; }
  .cage.toggled #critter-1 { left: 150px; top: 5px; }
  #critter-2 { left: 120px; top: 120px; }
  .cage.toggled #critter-2 { left: 10px; top: 75px; }

  /* manual */
  .demo .stage .abhorer {
    position: relative;
    left: 10px;
    top: 10px;
    border: 2px solid black;
  }
  .demo .stage input.abhorer[value=abc] {
    border-color: red;
  }
  
</style>
</head>

<body>
  <h1>Fx.Implicit Demo</h1>

  <h2>Basic usage</h2>
  <div class="demo">
    <pre><code>// Clicking Boo, the inconspicuous 
// rectangle on the right, toggles 
// a class name and consequently
// its background and color styles.
// We'll only animate text color.

Fx.Implicit.add('.boo', {
  properties: ['color']
});
    </code></pre>
    <div class="stage">
      <div class="boo togglable">BOO!</div>
    </div>
  </div>

  <h2>Animate Multiple Properties</h2>
  <div class="demo">
    <pre><code>// toggling Wobbler also changes
// multiple styles, but Fx.Implicit 
// can handle this automatically:

Fx.Implicit.add('.wobbler', {
  transition: 'bounce:out'
});

// Specifying properties is 
// recommended for efficiency though.

    </code></pre>
    <div class="stage">
      <div class="wobbler togglable">I am Wobbler</div>
    </div>
  </div>

  <h2>Hierarchy</h2>
  <div class="demo">
    <pre><code>// Changes in the DOM can trigger style 
// changes for inner elements. In this 
// example: critters move about when 
// their cage gets seriously toggled.

Fx.Implicit.add('.critter', {
  properties: ['left', 'top'],
  duration: 'long'
});

// Remember that Fx.Implicit inherits
// all options from Fx

    </code></pre>
    <div class="stage">
      <div class="cage togglable">
        cage
        <div id="critter-1" class="critter">critter</div>
        <div id="critter-2" class="critter">critter</div>
      </div>
    </div>
  </div>

  <h2>Download</h2>
  <p>
    <a href="http://mootools.net/forge/p/fx_implicit">Download Fx.Implicit from the Forge</a>
  </p>

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/base/fx/implicit.js"></script>

</body></html>